<script>
import axios from "axios";
import pagePath from "@/components/PagePath.vue";

const BASE_URL = 'http://localhost:8081/book/'

export default {
  name: 'crud',
  created() {
    let _this = this//这个是全局的

    // axios.get("http://localhost:8080/book/list").then(function (resp) {
    //   console.log(resp)
    //   // 这里不能直接使用this，因为 方法里的this是当前 function
    //   _this.tableData = resp.data
    // })

    axios.get(BASE_URL + "list").then(resp => {
      console.log(resp)
      //这里不能直接使用this，因为 方法里的this是当前 function
      _this.tableData = resp.data
    })

  },
  data() {
    return {
      tableData: [
        {
          name: 'Android',
          price: '100.00',
          bookid: 1
        }, {
          name: 'Vue.js',
          price: '90.00',
          bookid: 2
        }
      ],
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleDelete(index, row) {// row代表当前对象
      let _this = this//这个是全局的

      console.log(index, row);
      this.$confirm('是否删除《' + row.name + '》?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // });

        axios.delete(BASE_URL + "delete/" + row.bookid).then(resp => {
          console.log(resp.data)
          if (resp.data) {//删除成功
            _this.$alert('《' + row.name + '》删除成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: `action: ${ action }`
                // });

                location.reload()//刷新页面
              }
            });

          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push(pagePath.crud_update + '?bookid=' + row.bookid)
    },

    handleAdd() {
      this.$router.push(pagePath.crud_insert)
    }
  }
}

</script>
<!--
  https://element.eleme.cn/#/zh-CN/component/table
-->
<template>
  <div class="crud_axios_root">
    <el-table
        :data="tableData"
        border
        style="width: 600px">
      <el-table-column
          fixed
          prop="bookid"
          label="序号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="100">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 600px;">
      <el-button type="primary" style="margin-top: 20px; width: 100px; float: right; margin-right: 80px"
                 @click="handleAdd()">添加
      </el-button>
    </div>
  </div>

</template>

<style>
.crud_axios_root {
  margin-left: 400px;
  margin-right: 400px;
  text-align: left;
}

</style>